<template>
	<div>
		<div class="Tabletitle div-with-separator">车辆列表</div>

		<!--引用表格-->
		<BasicTable @register="registerTable" :rowSelection="rowSelection">
			<!--插槽:table标题-->
			<template #tableTitle>
				<!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> -->
				<!-- <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown> -->
				<super-query :config="superQueryConfig" @search="handleSuperQuery" />
			</template>
			<!--操作栏-->
			<template #action="{record}">
				<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
			</template>
			<!--字段回显插槽-->
			<template #name="{record}">
				<span @click="goUrl(record)" class="adiv">{{ record.name }}</span>
			</template>
			<template #chargingStationCount="{record}">
				<span class="adiv">{{ record.chargingStationCount }}</span>
			</template>
			<template v-slot:bodyCell="{column, record, index, text}"> </template>
		</BasicTable>
		<!-- 表单区域 -->
		<BizOperatorsModal @register="registerModal" @success="handleSuccess"></BizOperatorsModal>
	</div>
	<BasicDrawer @register="registerDrawer" v-bind="$attrs" title="运营商详情" width="50%">
		<p class="drawerTitle">青岛特锐德电气股份有限公司</p>
		<Description layout="vertical" @register="register" class="mt-4" />
		<Description layout="vertical" @register="register1" class="mt-4" />
	</BasicDrawer>
	<a-modal width="800px" style="top: 20px; text-align: center" v-model:open="modalopen" title="评估报告" @ok="modalopen = false">
		<iframe width="700px" style="height: 800px; overflow-y: scroll" :src="iframeurl" frameborder="0"></iframe>
	</a-modal>
</template>

<script lang="ts" name="test-bizOperators" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import {BasicTable, useTable, TableAction} from '/@/components/Table';
	import {useModal} from '/@/components/Modal';
	import {useListPage} from '/@/hooks/system/useListPage';
	import BizOperatorsModal from './components/BizOperatorsModal.vue';
	import {columns, searchFormSchema, superQuerySchema} from './BizOperators.data';
	import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './BizOperators.api';
	import {downloadFile} from '/@/utils/common/renderUtils';
	import {useUserStore} from '/@/store/modules/user';
	import {BasicDrawer, useDrawer, useDrawerInner} from '/@/components/Drawer';
	import {Description, DescItem, useDescription} from '/@/components/Description/index';

	const mockData: Recordable = {
		username: 'test',
		nickName: 'VB',
		age: '123',
		phone: '15695909xxx',
		email: '190848757@qq.com',
		addr: '厦门市思明区',
		sex: '男',
		certy: '3504256199xxxxxxxxx',
		tag: 'orange',
	};
	const schema: DescItem[] = [
		{
			field: 'username',
			label: '运营商编码',
		},
		{
			field: 'nickName',
			label: '运营商简称',
			render: (curVal, data) => {
				return `${data.username}-${curVal}`;
			},
		},
		{
			field: 'addr',
			label: '经营区域',
		},
		{
			field: 'certy',
			label: '社会统一信用代码',
		},
	];
	const [register] = useDescription({
		title: '基础信息',
		bordered: false,
		data: mockData,
		schema: schema,
	});
	const mockData1: Recordable = {
		username: 'test',
		nickName: 'VB',
		age: '123',
		phone: '15695909xxx',
		email: '190848757@qq.com',
		addr: '厦门市思明区',
		sex: '男',
		certy: '3504256199xxxxxxxxx',
		tag: 'orange',
	};
	const schema1: DescItem[] = [
		{
			field: 'username',
			label: '联系人',
		},

		{
			field: 'phone',
			label: '联系电话',
		},
	];

	const [register1] = useDescription({
		title: '联系人信息',
		bordered: false,
		data: mockData1,
		schema: schema1,
	});
	const [registerDrawer, {openDrawer, setDrawerProps}] = useDrawer();
	// 打开侧边弹窗
	function bizOperatorsDrawer(params) {
		openDrawer(true);
	}
	//goUrl
	// http://localhost:5173/ChargingBehaviorAnalysis/UserAnalysisdetails
	import {useRouter} from 'vue-router';
	const router = useRouter();

	function goUrl(record) {
		router.push({
			path: '/ChargingBehaviorAnalysis/UserAnalysisdetails',
			query: {
				// 传入当前的路由，登录成功后跳转到当前路由
				stationId: record.id,
			},
		});
	}
	const queryParam = reactive<any>({});
	const checkedKeys = ref<Array<string | number>>([]);
	const userStore = useUserStore();
	//注册model
	const [registerModal, {openModal}] = useModal();
	//注册table数据
	const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
		tableProps: {
			loading: true,
			title: 'biz_operators',
			api: list,
			columns,
			canResize: false,
			formConfig: {
				//labelWidth: 120,
				schemas: searchFormSchema,
				autoSubmitOnEnter: true,
				showAdvancedButton: true,
				fieldMapToNumber: [],
				fieldMapToTime: [],
			},
			actionColumn: {
				width: 120,
				fixed: 'right',
			},
			beforeFetch: (params) => {
				console.log('beforeFetch',params,queryParam);
				params.column='chargingStartTime'
				return Object.assign(params, queryParam);
			},
		},
		exportConfig: {
			name: 'biz_operators',
			url: getExportUrl,
			params: queryParam,
		},
		importConfig: {
			url: getImportUrl,
			success: handleSuccess,
		},
	});

	const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext;

	// 高级查询配置
	const superQueryConfig = reactive(superQuerySchema);

	/**
	 * 高级查询事件
	 */
	function handleSuperQuery(params) {
		Object.keys(params).map((k) => {
			queryParam[k] = params[k];
		});
		reload();
	}
	/**
	 * 新增事件
	 */
	function handleAdd() {
		openModal(true, {
			isUpdate: false,
			showFooter: true,
		});
	}
	/**
	 * 编辑事件
	 */
	function handleEdit(record: Recordable) {
		// openModal(true, {
		// 	record,
		// 	isUpdate: true,
		// 	showFooter: true,
		// });
		// ChargingBehaviorAnalysis/UserAnalysisdetails
		router.push({
			path: `/ChargingBehaviorAnalysis/UserAnalysisdetails`,
			query: {
				// 传入当前的路由，登录成功后跳转到当前路由
				vin: record.vin,
			},
		});
	}

	const modalopen = ref(false);
	const iframeurl = ref('https://www.chargesystem.cn/weixinh5/index.html');

	/**
	 * 详情
	 */
	function handleDetail(record: Recordable) {
		// openModal(true, {
		// 	record,
		// 	isUpdate: true,
		// 	showFooter: false,
		// });
		iframeurl.value = 'https://www.chargesystem.cn/weixinh5/index.html?pcVin=' + record.vin;
		modalopen.value = true;
	}
	/**
	 * 删除事件
	 */
	async function handleDelete(record) {
		await deleteOne({id: record.id}, handleSuccess);
	}
	/**
	 * 批量删除事件
	 */
	async function batchHandleDelete() {
		await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
	}
	/**
	 * 成功回调
	 */
	function handleSuccess() {
		(selectedRowKeys.value = []) && reload();
	}
	/**
	 * 操作栏
	 */
	function getTableAction(record) {
		return [
			{
				label: '详情',
				onClick: handleEdit.bind(null, record),
			},
			{
				label: '评估报告',
				onClick: handleDetail.bind(null, record),
			},
		];
	}
	/**
	 * 下拉操作栏
	 */
	function getDropDownAction(record) {
		return [
			// {
			// 	label: '详情',
			// 	onClick: handleDetail.bind(null, record),
			// },
			// {
			// 	label: '删除',
			// 	popConfirm: {
			// 		title: '是否确认删除',
			// 		confirm: handleDelete.bind(null, record),
			// 		placement: 'topLeft',
			// 	},
			// },
		];
	}
</script>

<style lang="less" scoped>
	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	.drawerTitle {
		font-weight: 700;
		font-style: normal;
		font-size: 28px;
		color: rgb(0, 0, 0);
	}

	.adiv {
		cursor: pointer;
		color: #00a096;
	}

	.Tabletitle {
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		position: relative;
		margin-left: 20px;
		padding-left: 11px;
		margin-top: 20px;

		&::before {
			content: '';
			background-color: #00a096;
			width: 4px;
			height: 16px;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -8px;
			border-radius: 3px;
		}
	}
</style>
